import 'package:flutter/material.dart';

class ImagePage extends StatefulWidget {
  const ImagePage({super.key});

  @override
  State<ImagePage> createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  final List<Map<String, dynamic>> fitModes = [
    //contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
    {'name': 'BoxFit.contain', 'fit': BoxFit.contain},
    // cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
    {'name': 'BoxFit.cover', 'fit': BoxFit.cover},
    // fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
    {'name': 'BoxFit.fill', 'fit': BoxFit.fill},
    // fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
    {'name': 'BoxFit.fitHeight', 'fit': BoxFit.fitHeight},
    // fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
    {'name': 'BoxFit.fitWidth', 'fit': BoxFit.fitWidth},
    // none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
    {'name': 'BoxFit.none', 'fit': BoxFit.none},
    // 将源内容对齐到目标框内（默认居中），如果必要，缩小源内容以确保其适应框的大小。
    // 这与`contain`效果相同，前提是它会缩小图像；
    // 否则，它与`none`效果相同。
    {'name': 'BoxFit.scaleDown', 'fit': BoxFit.scaleDown},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片适配模式展示')),
      body: ListView.builder(
        itemCount: fitModes.length,
        itemBuilder: (context, index) {
          final mode = fitModes[index];
          return Column(
            children: [
              Container(
                height: 500,
                width: 695,
                margin: const EdgeInsets.all(8),
                child: Image.network(
                  "https://img2.baidu.com/it/u=1852044603,1166589216&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695",
                  fit: mode['fit'],
                  errorBuilder:
                      (context, error, stackTrace) => const Icon(Icons.error),
                ),
              ),
              Text(
                mode['name'],
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const Divider(),
            ],
          );
        },
      ),
    );
  }
}
